<template>
  <view class="douyin-mount">
    <image
      :src="img"
      mode="widthFix"
      class="douyin-mount-image"
    />

    <!-- <view class="num-container">
      剩余可申请加白抖音账号数量：<text style="color: #fd3666;">{{ num > 0 ? num : 0 }}</text>
    </view> -->

    <view class="footer-info flex fc ac jc">
      <view class="btn1 flex ac jc" @click="handleEdit" :class="{
        'disabled-btn': disabled
      }">
        <u-icon name="https://img.alicdn.com/imgextra/i2/1888948409/O1CN01SQMrv12BzNT2MoI1a_!!1888948409.png" size="32"></u-icon>
        <text style="margin-left: 6rpx;">立即申请</text>
      </view>

      <view class="btn2 flex ac jc" @click="handleLog">
        <u-icon name="file-text-fill" color="#56d39d" size="36"></u-icon>
        <text style="margin-left: 6rpx;">申请记录</text>
      </view>
    </view>
  </view>
</template>

<script>
  import { findDouyinMountListByUserId } from '@/api/user';
  export default {
    data() {
      return {
        num: 0,
        disabled: false,
        img:require('../../../static/image/zerofans.png')
      }
    },

    onLoad(options) {
      this.num = options.num;
      this.findDouyinMountListByUserId(options.num || 0);
    },

    methods: {

      // 获取抖音挂载列表
      findDouyinMountListByUserId(num) {
        findDouyinMountListByUserId().then(result => {
          if (result && result.data && result.data.length > 0) {
            let listLength = result.data.length;
            this.num = num - listLength;
            if (listLength >= num) {
              this.disabled = true;
            }
          }
        })
      },

      // 前往提交申请
      handleEdit() {
        if (!this.disabled) {
          uni.navigateTo({
            url: '/pages/douyinMount/application/detail'
          })
        }
      },

      // 前往提交申请
      handleLog() {
        uni.navigateTo({
          url: '/pages/douyinMount/application/record'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page{
    background: linear-gradient(to bottom, #56d39d, #bdd1c8);
  }

  .douyin-mount{
    position: relative;
background: #fff;
    .num-container{
      position: absolute;
      left: 0;
      top: 580rpx;
      width: 100%;
      height: 54rpx;
      padding-left: 48rpx;
      font-weight: 700;
      font-size: 34rpx;
      color: #000;
    }

    .footer-info{
      // position: fixed;
      width: 100%;
      height: 338rpx;
      left: 1;
      bottom: 0;
      z-index: 99;
      padding: 0 48rpx;
    }

    .btn1{
      width: 100%;
      height: 98rpx;
      background: $uni-color-primary;
      border-radius: 22rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #fff;
      margin-bottom: 32rpx;
    }

    .btn2{
      width: 100%;
      height: 98rpx;
      border: 2rpx solid $uni-color-primary;
      color: $uni-color-primary;
      border-radius: 22rpx;
      font-size: 32rpx;
      font-weight: bold;
      background: #fff;
    }

    .disabled-btn{
      background-color: #888;
      color: #ccc;
    }
  }

  .douyin-mount-image{
    width: 100%;
    float: left;
  }
</style>
